<template>
  <view class="machineDetail">
    <pagehead>商户详情</pagehead>
    <scroll-view scroll-y class="machineDetail-scroll" @scrolltolower="lower()" v-if="isShowPage">
      <view class="machineDetail-list">
        <view class="machineDetail-item">
          <view class="top">
            <view class="name">{{detail.name}}</view>
            <view class="right">{{ detail.phone_no | conceal(4) }}
              <image :src="IMAGE_STATIC+'/images/copy.png'" @click="$tools.copy(detail.phone_no)" class="ico" mode="heightFix" />
            </view>
          </view>
          <view class="info">
            <view class="label">机具编号</view>
            <view class="des">{{ detail.sn_code }}</view>
          </view>
          <view class="info">
            <view class="label">商户名称</view>
            <view class="des">{{detail.merchant_name}}</view>
          </view>
          <view class="info">
            <view class="label">本月交易额</view>
            <view class="des">{{viewCount(detail.month_trade_money)}}</view>
          </view>
          <view class="info">
            <view class="label">总交易额</view>
            <view class="des">{{viewCount(detail.total_trade_money)}}</view>
          </view>
          <view class="info">
            <view class="label">服务费</view>
            <view class="des">{{detail.is_fee == 1 ?'是':'否'}}</view>
          </view>
          <view class="info">
            <view class="label">注册时间</view>
            <view class="des">{{detail.merchant_register_time}}</view>
          </view>
        </view>
        <!-- 本月 -->
        <view class="machineDetail-item">
          <view class="top">
            <view class="name">本月</view>
          </view>
          <view class="info">
            <view class="label">信用卡交易量</view>
            <view class="des">{{detail.month_trade_money_type1}}</view>
          </view>
          <view class="info">
            <view class="label">借记卡交易量</view>
            <view class="des">{{detail.month_trade_money_type2}}</view>
          </view>
          <view class="info">
            <view class="label">云闪付交易量</view>
            <view class="des">{{detail.month_trade_money_type3}}</view>
          </view>
          <view class="info">
            <view class="label">扫码交易量</view>
            <view class="des">{{detail.month_trade_money_type4}}</view>
          </view>
          <view class="info">
            <view class="label">聚合类交易量</view>
            <view class="des">{{detail.month_trade_money_type5}}</view>
          </view>
          <view class="info">
            <view class="label">其他类交易量</view>
            <view class="des">{{detail.month_trade_money_type6}}</view>
          </view>
        </view>
        <!-- 累计 -->
        <view class="machineDetail-item">
          <view class="top">
            <view class="name">累计</view>
          </view>
          <view class="info">
            <view class="label">信用卡交易量</view>
            <view class="des">{{detail.total_trade_money_type1}}</view>
          </view>
          <view class="info">
            <view class="label">借记卡交易量</view>
            <view class="des">{{detail.total_trade_money_type2}}</view>
          </view>
          <view class="info">
            <view class="label">云闪付交易量</view>
            <view class="des">{{detail.total_trade_money_type3}}</view>
          </view>
          <view class="info">
            <view class="label">扫码交易量</view>
            <view class="des">{{detail.total_trade_money_type4}}</view>
          </view>
          <view class="info">
            <view class="label">聚合类交易量</view>
            <view class="des">{{detail.total_trade_money_type5}}</view>
          </view>
          <view class="info">
            <view class="label">其他类交易量</view>
            <view class="des">{{detail.total_trade_money_type6}}</view>
          </view>
        </view>
      </view>
      <!-- <view class="initNoData" v-if="list.length == 0">—暂无内容—</view> -->
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      IMAGE_STATIC: this.$url.assetsPath, //图片资源
      currentIndex: 0,
      type: '',
      pageIndex: 1,
      pageSize: 10,
      lastId: '',
      lsShow: true,
      isShowPage: true,
      tab: [
        { name: '全部' },
        { name: '待激活' },
        { name: '已激活' },
      ],
      total: 1,
      detail:{
        id: 1, 
        phone:'18529524578',
        name: '张三三',
      },
      list: [
        { id: 1, name: '张三三', phone: '18529524578' }
      ]
    };
  },
  onLoad(options) {
    if (options) {
      this.type = options.value1
      this.init();
    }
  },
  // 下拉刷新
  onPullDownRefresh() {
    console.log('refresh');
    this.init();
    this.isLoadShow = true;
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 500);
  },
  methods: {
    init() {
      this.pageIndex = 1
      this.pageSize = 10
      this.lastId = '';
      this.goodsDataList = [];
      this.getRecord();
    },
    // 切换
    changeTab(index) {
      if (this.currentIndex != index) {
        this.currentIndex = index
        // this.init()
      }
    },
    // 列表
    getRecord() {
      let that = this;
      var data = {
        sn_code: that.type,  
      };
      console.log("data", data);
      uni.showLoading({
        mask: true
      })
      that.$Ajax('/api/user/merchant/getUserMerchantDetail', data, res => {
        uni.hideLoading();
        that.isShowPage = true;
        that.detail = res.data.userMerchantDetail;
        // this.total = res.total
        // console.log('goodsDataList', this.goodsDataList)
        // this.serachShow = false
        // if (res.data.length < this.total) {
        //   this.pageIndex++
        //   that.lsShow = true;
        // } else {
        //   that.lsShow = false;
        // }
        // console.log("》》》", that.lsShow, that.goodsDataList.length);
      }, err => {
      }
      );
    },
    lower() {
      console.log("分页");
      if (this.lsShow == true) {
        this.getRecord();
      } else {
        // return this.$tools.toast('到底了');
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.machineDetail {
  padding-bottom: 40rpx;
  .tab {
    @include flexBetween;
    background: #FFFFFF;
    box-shadow: inset 0rpx 1rpx 0rpx 0rpx #E7E7E7;

    .item {
      width: 50%;
      text-align: center;
      height: 96rpx;
      line-height: 96rpx;
      font-size: 32rpx;
      color: rgba(0, 0, 0, 0.6);
    }

    .active {
      font-weight: 600;
      font-size: 32rpx;
      color: #333333;
      position: relative;
    }

    .active::before {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-40rpx);
      content: '';
      width: 80rpx;
      height: 8rpx;
      background: #AD2926;
      border-radius: 70rpx;
    }
  }

  .machineDetail-sort {
    @include flexBetween;
    overflow: hidden;
    width: 93.6%;
    margin: auto;
    margin-top: 32rpx;
    padding: 0 12rpx;
    font-size: 28rpx;
    color: #000000;

    .ico {
      width: 32rpx;
      height: 32rpx;
      display: inline-block;
      vertical-align: middle;
      margin-left: 8rpx;
    }
  }

  &-scrol {
    overflow: hidden;
  }

  &-item {
    overflow: hidden;
    width: 93.6%;
    margin: auto;
    background: #fff;
    border-radius: 16rpx;
    padding: 32rpx 0;
    margin-top: 24rpx;
    font-size: 24rpx;
    color: #000000;

    .top {
      @include flexBetween;
      padding: 0 28rpx;
      padding-bottom: 32rpx;
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);

      .name {
        font-size: 28rpx;
      }
    }

    .ico {
      width: 32rpx;
      height: 32rpx;
      display: inline-block;
      vertical-align: middle;
      margin-left: 8rpx;
    }

    .info {
      @include flexBetween;
      padding: 0 28rpx;
      margin-top: 24rpx;

      .label {
        font-size: 28rpx;
        color: #999999;
      }
    }
  }

  image {
    width: 100%;
    height: 100%;
  }
}
</style>
